<template>
    <div class="back" >

        <div style="  margin-left: 200px;
        margin-top: 100px; width:890px;background:rgba(200, 100, 100, 0);" v-if="tableData.length">
            <h2>购物车</h2>
            <el-table :data="tableData" style="width: 100%;background:rgba(200, 100, 100, 0)">
                <el-table-column type="index" width="50" align="center" header-align="center">
                </el-table-column>
                <el-table-column prop="productName" label="商品名称" width="180" align="center"
                                 header-align="center">
                </el-table-column>
                <el-table-column prop="bussinessName" label="商家" width="180" align="center"
                                 header-align="center">
                </el-table-column>
                <el-table-column prop="price" label="价格" width="180" align="center"
                                 header-align="center">
                    <template slot-scope="scope">
                        <div>{{ scope.row.price | showPrice}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="productNum" label="购买数量" width="180" align="center"
                                 header-align="center">
                    <template slot-scope="scope">
                        <div style="display: flex;align-items: center;justify-content:
                        center;">
                            <el-button size="small" @click="decrement(scope.$index)"
                                       :disabled="scope.row.productNum <= 1">-</el-button>
                            <div style="width: 50px;">{{scope.row.productNum}}</div>
                            <el-button size="small" type="primary"
                                       @click="increment(scope.$index)">+</el-button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120" align="center" header-align="center">
                    <template slot-scope="scope">
                        <el-button type="danger" size="small"
                                   @click="removeHandle(scope.$index)">
                            移除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <h2>总计：{{totalPrice | showPrice}}</h2>
            <el-button style="float: right" type="primary" size="small" @click="buy()">购买</el-button>
        </div>

        <div v-else>购物车为空</div>
    </div>

</template>

<script>
    import {getShopCarMsg} from "../../../api/api";
import {getToken} from "../../../utill/Token";
import {updateShopCar} from "../../../api/api";
import {deleteShopCar} from "../../../api/api";
    import {deleteAnyShopCar} from "../../../api/api";
    export default {
        data() {
            return {
                pagination: {
                    currentPage: 1, //当前页数
                    pageSize: 10, // 每页显示条数
                    total: 0, // 总条数
                    customerId:"",
                    bussinessId:"",
                },
                tableData: [
                ],
            }
        },
        created() {
            this.pagination.bussinessId = getToken("bussiness_id");
            this.pagination.customerId = getToken("user_id");
           this.getData();
        },
        computed: {

            totalPrice() { //计算总价
                let total = 0;
                for(let i in this.tableData){
                    total += this.tableData[i].price * this.tableData[i].productNum;
                }
                return total
            }
        },
        filters:{ //过滤器
            // 拼接价格/总价
            showPrice(price){
                return '￥'+ price.toFixed(2);
            }
        },
        methods: {
            getData(){
                getShopCarMsg(this.pagination).then((res) => {
                    this.tableData = res.data.data.records;
                    console.log( this.tableData)
                });
            },
            increment(index){//加
                this.tableData[index].productNum++;
                updateShopCar(this.tableData[index]).then((res) => {
                    console.log(res.data.data)
                });
            },
            decrement(index){//减
                this.tableData[index].productNum--;
                console.log(this.tableData[index])
                updateShopCar(this.tableData[index]).then((res) => {
                    console.log(res.data.data)
                });
            },
            removeHandle(index){//移除
                deleteShopCar(this.tableData[index]).then((res) => {
                    console.log(res.data.data)
                });
                this.tableData.splice(index,1);
            },
            buy(){
                deleteAnyShopCar(this.pagination).then((res) => {
                    console.log(res.data.data)
                    this.getData();
                    this.$message({
                        message: '购买成功',
                        type: 'success'
                    });
                });
            }
        }
    }
</script>
<style>
    .back{
        position:absolute;
        width:100%;
        height:100%;
        background-image: url("../../../assets/img/jb (2).jpg");
        background-position: center;
        background-size: cover;
    }
</style>
